<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<form name="myForm">
	<input name="a" type="text" >+
	<input name="b" type="text" >
	<button name="btn">=</button>
	<input name="sum" type="text" >
</form>
<script>
	document.myForm.btn.onclick = function(e){
		e.preventDefault();
		
		const xhr = new XMLHttpRequest();
		xhr.responseType = "json";
		// 当获取到响应体信息后执行
		xhr.onload = function(){
			const {ok,sum,msg} = xhr.response;
			if(ok === 1) document.myForm.sum.value = sum;
			else alert(msg);
		}
		// http://127.0.0.1/a/b/c/3-post.html
		// xhr.open("post","./sum");// http://127.0.0.1/a/b/c/sum
		// xhr.open("post","../sum");// http://127.0.0.1/a/b/sum
		// xhr.open("post","../../sum");// http://127.0.0.1/a/sum
		// xhr.open("post","../../../sum");// http://127.0.0.1/sum
		// xhr.open("post","../../../../../../sum");// http://127.0.0.1/sum
		xhr.open("post","/sum");// http://127.0.0.1/sum
		
		// application/json
		// xhr.setRequestHeader("Content-Type","application/json")
		// xhr.send(JSON.stringify({
		// 	a:document.myForm.a.value.trim(),
		// 	b:document.myForm.b.value.trim()
		// }));
		
		// application/x-www-form-urlencoded
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
		xhr.send(`a=${document.myForm.a.value.trim()}&b=${document.myForm.b.value.trim()}`);
		
	}
</script>
</body>
</html>